<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item label="时间切片名称" prop="name">
      <el-input v-model="newFormInline.name" placeholder="请输入时间切片名称" />
    </el-form-item>
    <!-- 时间切片类型 -->
    <el-form-item label="时间切片类型" prop="type">
      <el-radio-group v-model="newFormInline.type">
        <el-radio :value="0">按天</el-radio>
        <el-radio :value="1">按周</el-radio>
        <el-radio :value="2">按月</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 时间表达式 -->
    <el-form-item label="时间表达式" prop="express">
      <el-input
        v-model="newFormInline.express"
        placeholder="请输入时间表达式"
      />
    </el-form-item>
    <!-- 是否禁用 -->
    <el-form-item label="是否禁用" prop="disabled">
      <el-radio-group v-model="newFormInline.disabled">
        <el-radio :value="0">否</el-radio>
        <el-radio :value="1">是</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 备注 -->
    <el-form-item label="备注" prop="comment">
      <el-input
        v-model="newFormInline.comment"
        type="textarea"
        :maxlength="200"
        show-word-limit
        :rows="4"
        placeholder="请输入备注，最多200字"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { FormProps } from "../componentsUtils/type/timeSliceTypes";
import {
  formRules,
  setRuleFormRef
} from "../componentsUtils/rule/timeSliceRules";
import { ElMessage } from "element-plus";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    dealerId: 0,
    tenantId: 0,
    name: "",
    type: 0,
    express: "",
    disabled: 0,
    comment: ""
  }),
  title: ""
});

const newFormInline = ref(props.formInline);
const ruleFormRef = ref();

// 设置表单引用供规则校验使用
onMounted(() => {
  setRuleFormRef(ruleFormRef);
});

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
